<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		div{
			text-align: center;
			margin-top:100px;
		}
	</style>
</head>
<body>
	<div>
		<canvas id="canvas" width="200" height="200"></canvas>
		<h4 style="display: none" id="h4">lalla1</h4>
		<img src="/static/img/fly.png" alt="">
	</div>
	<script>
		let clock=canvas;
		let ctx=clock.getContext('2d');
		let width=clock.width;
		let height=clock.height;
		let r=width/2;
		let rem=width/200;
		
		function draw(){//初始化时钟
			ctx.clearRect(0,0,width,height);
			let date=new Date();
			let hour=date.getHours();
			let showText=false;//显示文字
			let minute=date.getMinutes();
			let second=date.getSeconds();
			if(hour==0&&minute==0&&second==0){
				console.log(1)
				h4.style.display='block'
			}
			console.log(`${hour}-${minute}-${second}`)
			drawBackground()//初始化表盘
			drawHour(hour,minute)//初始化时针
			drawMinute(minute)//初始化分针
			drawSecond(second)//初始化秒针
			drawDot();
			ctx.restore();
		}
		function drawBackground(){//初始化表盘
			ctx.save();//保存画布状态
			ctx.translate(r, r);//定义中心
			ctx.beginPath();//开始绘制
			ctx.lineWidth = 10 * rem;
			//arc (x,y,r,起始角度,结束角度,False = 顺时针/true = 逆时针)
			//Math.PI为180°  从三点开始
			ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, 2 * Math.PI, false);
			ctx.stroke();//绘制表盘
			let hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
			hourNumbers.forEach(function (number, i) {
				let rad = 2 * Math.PI / 12 * i;//把360度分为12份  可以得出数字所占的份额
				let x = Math.cos(rad) * (r - 30 * rem);//70
				let y = Math.sin(rad) * (r - 30 * rem);
				ctx.textAlign = 'center';
				ctx.textBaseline = 'middle';
				ctx.font = 18 * rem + "px Arial";
				ctx.fillText(number, x, y)
			})
			for(let i = 0; i < 60; i++){
				let rad = 2 * Math.PI / 60 * i;
				let x = Math.cos(rad) * (r - 18 * rem);
				let y = Math.sin(rad) * (r - 18 * rem);
				ctx.beginPath();
				if (i % 5 === 0) {
					ctx.fillStyle = '#000';
				} else {
					ctx.fillStyle = '#ccc';
				}
				ctx.arc(x, y, 2 * rem, 2 * Math.PI, false);
        		ctx.fill();
			}
		}
		function drawHour(hour, minute){//初始化时针
			ctx.save();//保存画布状态
			ctx.beginPath();//开始绘制
			// let hours=hour>12?hour-12:hour;
			let rad = 2 * Math.PI / 12 * hour;
			let mrad = 2 * Math.PI / 12 / 60 * minute;
			ctx.rotate(rad + mrad);
			ctx.lineWidth = 6 * rem;
			ctx.moveTo(0, 10 * rem);
			ctx.lineTo(0, -r / 2);
			ctx.lineCap = 'round';
			ctx.stroke();
			ctx.restore();
		}
		function drawMinute(minute){
			ctx.save();
			ctx.beginPath();
			let rad = 2 * Math.PI / 60 * minute;
			ctx.rotate(rad);
			ctx.lineWidth = 3 * rem;
			ctx.moveTo(0, 10 * rem);
			ctx.lineTo(0, -r / 2 - 10);
			ctx.lineCap = 'round';
			ctx.stroke();
			ctx.restore();
		}
		function drawSecond(second){
			ctx.save();
			ctx.beginPath();
			let rad = 2 * Math.PI / 60 * second;
			ctx.rotate(rad);
			ctx.lineWidth = 3;
			ctx.moveTo(-2 * rem, 20 * rem);
			ctx.lineTo(2 * rem, 20 * rem);
			ctx.lineTo(1, -r + 18 * rem);
			ctx.lineTo(1, -r + 18 * rem);
			ctx.fillStyle = '#e4393c';
			ctx.fill();
			ctx.restore();
		}
		function drawDot() {
			ctx.beginPath();
			ctx.fillStyle = '#fff';
			ctx.arc(0, 0, 3 * rem, 2 * Math.PI, false);
			ctx.fill();
		}
		// draw()
		setInterval(draw, 1000);
	</script>
</body>
</html>